// 0. 新建组件Clock.js
// 1. 创建一个名称扩展自 React.Component 的ES6 类
// 2. 创建一个叫做render()的空方法
// 3. 将函数体移动到 render() 方法中
// 4. 为当前组件添加一个局部状态state
// 5. 给组件添加生命周期componentDidMount、componentWillUnmount
// 6. 编写一个updateTime的函数,里面设定定时器,并且更新时间
// 7. 在componentDidMount中调用updateTime函数
// 8. 在componentWillUnmount这个钩子中卸载定时器

import React from "react"
import "./index.scss"
// 类组件，也称之为有状态组件
class Clock extends React.Component {
    constructor() {
        // 使用this前必须调用super()
        super()
        // 定义当前组件的局部状态==> 相当于vue组件中的data
        this.state = {
            timer: new Date().toLocaleTimeString(),
            year: new Date().getFullYear(),
            month: new Date().getMonth()+1,
            day: new Date().getDate(),
            hours: new Date().getHours(),
            minutes: new Date().getMinutes(),
            seconds: new Date().getSeconds(),
            timt:true,
        }
    }
    updateTime() {
        this.interval = setInterval(() => {
            // 使用setState方法来更新局部数据
            // setState() 传递一个对象 这个对象会和this.state这个对象进行浅合并
            this.setState({
                timer: new Date().toLocaleTimeString(),
                year: new Date().getFullYear(),
                month: new Date().getMonth() + 1,
                day: new Date().getDate(),
                hours: new Date().getHours(),
                minutes: new Date().getMinutes(),
                seconds: new Date().getSeconds(),
                timt:!this.state.timt
            })
        }, 500)
    }
    componentDidMount() {    // 组件挂载之后==>相当于vue中的 mounted
        this.updateTime()
    }
    componentWillUnmount() {   // 组件即将卸载==>相当于vue中的beforeDestroy 
        //卸载定时器
        clearInterval(this.interval)
    }
    
    //这是react生命周期中的一个钩子函数,这里会进行diff算法和更新虚拟dom
    render() {
        var { year, month, day, hours, minutes, seconds, timt } = this.state
        return (
            <div className="fieldset">
                <span style={{ fontFamily: 'digitalNumber', fontSize: "0.11rem" }}>{year}-{month}-{day}</span><br />
                <span style={{fontFamily:'digitalNumber',fontSize:"0.11rem"}}>{hours+(timt?":":" ")+minutes}</span>
            </div> 
        )
    }
}

// 导出
export default Clock
